<template>
  <view>
    <u-navbar title="巡检历史" :background="{ backgroundColor:'#9CE0FF'}" :border-bottom="false" title-color="#000" title-size="37" />
    <view id="container" :style="{minHeight:`calc(100vh - ${top}px - 150rpx)`}">
      <u-checkbox-group class="w-full" size="40" @change="change">
        <view class="flex flex-column p-lr-20 w-full">
          <view v-for="item in checkList" :key="item.workOrderId" class="p-lr-20 h-110 flex align-center border-bottom-CCCCCC">
            <u-checkbox class="w-full flex" :name="item.name" v-model="item.checked" :disabled="false" active-color="#2D8CF0">
              <view class="ml-30 flex flex-column fz-32 lh-45 p-tb-20">
                <text class="mb-5" > {{ item.time }} </text>
                <text class="color-19BE6B"> {{ item.status == 4 ? '已完成' : item.status == 2 ? '有漏检' : '-' }} </text>
              </view>
            </u-checkbox>
          </view>
        </view>
      </u-checkbox-group>
    </view>
    <view class="pl-40 pr-50 h-150 w-full bg-fff flex align-center justify-between sticky bottom0">
      <u-checkbox v-model="isAll" :disabled="false" active-color="#2D8CF0" size="40" @change="isAllChange">
        <text class="fz-32 ml-10" >全选</text>
      </u-checkbox>
      <view class="w-250 h-80 br-10 bg-19BE6B color-fff lh-80 text-center fz-30" @tap="paperVersion">
        <text>录入纸质版</text>
      </view>
    </view>

    <u-modal border-radius="20" :show-confirm-button="false" :show-title="false" mask-close-able v-model="isModalShow">
      <view class="h-150 flex align-center justify-center font-bold">
        <image class="mr-20 w-38 h-38" src="@/static/images/mine/error.png"></image>
        <text class="fz-30 color-333333 err-text">{{modalContent}}</text>
      </view>
    </u-modal>

    <!--图片上传中模态框-->
    <u-modal border-radius="20" :show-confirm-button="false" :show-title="false" v-model="isUploading">
      <view class="h-200 flex flex-column align-center justify-center font-bold color-888888 lh-33">
        <text class="mb-10">图片上传中</text>
        <u-loading mode="circle"></u-loading>
      </view>
    </u-modal>

    <!--图片加水印画板-->
    <canvas class="absolute top-99999"
            v-if="windowWidth !== 0 && windowHeight !== 0"
            :style="{'width':`${windowWidth}px`,'height': `${windowHeight}px`}"
            :canvas-id="`mycanvas`" >
    </canvas>
  </view>
</template>

<script>
import getNavBarHeight from "@/mixins/getNavBarHeight";
import { workOrderSignBatch } from '@/api/inspection/sign'
import dayjs from '@/libs/dayjs.min.js'
import { recordHistory } from "@/api/inspection/record"
import uploadMaskImg from "@/mixins/uploadMaskImg";
export default {
  name: "batch-entry",
  mixins:[getNavBarHeight, uploadMaskImg],
  data(){
    return {
      checkList:[],
      isAll: false,
      isModalShow: false,
      modalContent: '',
      checkBoxLength: '0',
      isUploading: false,
    }
  },
  onLoad(options){
    this.doQuery(JSON.parse(options.data))
  },
  methods:{
    doQuery(data){
      //按时间升序排序
      recordHistory(data).then(res => {
        this.checkList = res.data.map(item => {
          let time = item.startDate + item.workOrderStartTime
          return {...item, checked:false, time: dayjs(time).format('YYYY-MM-DD HH:mm') }
        }).sort((pre,next) => {
          return dayjs(pre.time).unix() - dayjs(next.time).unix()
        })
      })
    },
    change(detail){
      this.checkBoxLength = detail.length
      this.isAll = detail.length == this.checkList.length
    },
    isAllChange(){
      this.checkList.forEach(item => {
        item.checked = !this.isAll
      })
      this.checkBoxLength = this.checkList.length
    },
    paperVersion(){
      if(this.checkBoxLength == '0') {
        this.isModalShow = true
        this.modalContent = '请选择巡检工单!'
      }else {
        this.uploadMaskImg()
      }
    },
    maskContent(ctx, image){
      //水印内容
      ctx.strokeText(this.$store.getters.staffName || '-',image.width * 0.092,image.width * 0.18);
      ctx.fillText(this.$store.getters.staffName || '-', image.width * 0.092, image.width * 0.18)

      ctx.strokeText(dayjs().format('YYYY-MM-DD HH:mm:ss'),image.width * 0.092,image.width * 0.23);
      ctx.fillText(dayjs().format('YYYY-MM-DD HH:mm:ss'), image.width * 0.092, image.width * 0.23)
    },
    uploadSuccessCallback(data) {
      const workOrderIdList = this.checkList.filter(item => { return item.checked }).map(res => { return res.workOrderId })
      workOrderSignBatch({ workOrderIdList, ossId: `${data.data.ossId}` }).then(res => {
       // 删除对应已勾选的列表
        this.checkList = this.checkList.filter(item => {
          return !item.checked
        })
        if(!this.checkList.length){
          this.$tab.switchTab('/pages/tabbar/home/home')
        }
      })
    },
  },
  options: {styleIsolation: "shared"},
}
</script>
<style lang="scss">
page{
  background-color: #FFFFFF;
}
</style>
<style lang="scss" scoped>
/deep/ .u-checkbox{
  width: 100% !important;
  display: flex !important;
}
/deep/ .u-checkbox__label{
  flex: 1 !important;
  line-height: 140rpx;
}
.bottom0{
  bottom: 0;
}
.err-text {
  font-family: PingFang SC-Bold;
}
</style>
